<template>
  <a-card :bordered='false'>
    <!-- 查询区域 -->
    <search ref='search' :config='searchConfig' @search='search' @getHeight='getHeight' />
    <div class='page_table'>
      <vxe-grid
        ref='xGrid'
        :border='true'
        :resizable='true'
        :showOverflow='true'
        size='mini'
        :loading='loading'
        :height='pageHeight-seachHeight-90'
        :align='left'
        :columns='columns'
        :data='dataSource'
        :toolbar-config='tableToolbar'
       :checkbox-config="checkboxConfig"
        v-bind='vexConfig'
        @checkbox-change='selectChangeEvent'
        @checkbox-all='selectChangeEvent'
      >
        <template #toolbar_buttons>
          <div class='table-operator'>
            <a-button type='primary' @click='handleAddStore'>新增</a-button>
            <a-button type='primary' @click='getDelete'>删除</a-button>
          </div>
        </template>
        <template #status='{ row }'>
          <a-switch :checked='row.status' size='small' @change='handleStatus(row,$event)' />
        </template>
        <template #action='{ row:record }'>
          <a @click='handleEdit1(record)'>编辑</a>
        </template>
        <template #pager>
          <vxe-pager
            :layouts="['Total', 'PrevJump', 'PrevPage', 'Number', 'NextPage', 'NextJump','Sizes', 'FullJump']"
            :currentPage.sync='ipagination.current'
            :page-size.sync='ipagination.pageSize'
            :total='ipagination.total'
            :pageSizes='ipagination.pageSizeOptions'
            @page-change='handlePageChange'>
          </vxe-pager>
        </template>
      </vxe-grid>
    </div>

    <form-add-edit ref='popupForm' @kaChange='kaChange' @ok='loadData()'></form-add-edit>
    <grab-log ref='grabLog'></grab-log>
  </a-card>
</template>

<script>
import { getAction, postAction } from '@/api/manage'
import { PageListMixin } from '@/mixins/PageListMixin'
import FormAddEdit from '@comp/view/base-crud/form/FormAddEdit'
// import grabLog from './model/grabLog'
import Vue from 'vue'
import search from '@comp/view/base-crud/search/Search'
import { ACCESS_TOKEN } from '@/store/mutation-types'

export default {
  name: 'chargeNumber',
  mixins: [PageListMixin],
  components: {
    // CnDictSelectTag
    FormAddEdit,
    // grabLog,
    search
  },
  data() {
    return {
      tokenHeader1: { 'loginUserToken': Vue.ls.get(ACCESS_TOKEN) },
      description: '数据库配置',
      // 表头
      columns: [
        { type: 'checkbox', width: 50, fixed: 'left' },

        {
          title: '模块',
          minWidth: 100,
          field: 'module',
        },
        {
          title: '数据库schema',
          minWidth: 100,
          field: 'databaseName'
        },
        {
          title: '数据库类型',
          minWidth: 100,
          field: 'databaseType'
        },
        {
          title: '驱动',
          minWidth: 120,
          field: 'diverName'
        },
        {
          title: '用户',
          minWidth: 100,
          field: 'username'
        },
        {
          title: '数据库地址',
          minWidth: 150,
          field: 'url'
        },
        {
          title: '备注',
          minWidth: 100,
          field: 'remarks'
        },
        {
          title: '状态',
          align: 'center',
          fixed: 'right',
          width: 60,
          field: 'status',
          slots: {
            default: 'status'
          }

        },
        {
          fixed: 'right',
          title: '操作',
          width: 100,
          field: 'action',
          slots: {
            default: 'action'
          }
        }
      ],
      searchConfig: [
        {
          // label:'订单编号',
          type: 'j-select',
          dictCode: 'database_type',
          name: 'databaseType',
          placeholder: '请选择数据库类型'
        }, {
          // label:'业务员',
          type: 'input',
          name: 'username',
          placeholder: '请输入用户'
        },
        // {
        //   // label:'业务员',
        //   type: 'input',
        //   name: 'custName',
        //   placeholder: '请输入经销商名称'
        // },
        {
          type: 'a-select',
          name: 'status',
          option: [{
            name: '启用',
            value: 1
          }, {
            name: '停用',
            value: 0
          }],
          placeholder: '请选择状态'
        }
      ],
      // dataSource:[{
      //   a:'18382492662',
      //   b:'红旗连锁',
      //   c:'********',
      //   d:'成都红旗/红旗物流',
      //   e:'启用',
      //   f:'李飞',
      //   g:'2020-12-15',
      // },{
      //   a:'18382492663',
      //   b:'红旗连锁-高新区',
      //   c:'********',
      //   d:'成都红旗/红旗物流',
      //   e:'启用',
      //   f:'李飞',
      //   g:'2020-12-15',
      // },{
      //   a:'18382492664',
      //   b:'红旗连锁-武侯区',
      //   c:'********',
      //   d:'成都红旗/红旗物流',
      //   e:'启用',
      //   f:'李飞',
      //   g:'2020-12-15',
      // },],
      url: {
        list: window._CONFIG['domianConfigURL'] + '/genDataConfigController/findPageList',
        deleteBatch: window._CONFIG['domianConfigURL'] + '/genDataConfigController/delete',
        // list: window._CONFIG['domianSfaURL']+ "/sfaSignController/findPageListStatement",
        openid: window._CONFIG['domianConfigURL'] + '/kaBaseAccount/doUnbound',
        // 导入接口
        importExcelUrl: window._CONFIG['domianKaURL'] + '/kaBaseAccount/importExcel',
        // 模版下载
        exportXlsUrl: window._CONFIG['domianKaURL'] + '/kaBaseAccount/exportXls',
        // 启用/停用
        status: window._CONFIG['domianConfigURL'] + '/genDataConfigController/saveOrUpdate'
      }
    }
  },

  computed: {
    importExcelUrl: function() {
      return `${this.url.importExcelUrl}`
    }
  },
  methods: {
    uboundOpenId(row) {
      getAction(this.url.openid, { id: row.id }).then(res => {
        if (res.success) {
          this.$message.success(res.message)
        } else {
          this.$message.error(res.message)
        }
      })
    },

    handleAddStore() {
      let config = {
        title: '新建配置',
        width: 500,
        addOrUpdateUrl: `${window._CONFIG['domianConfigURL']}/genDataConfigController/saveOrUpdate`,  //审核地址
        method: 'post',
        list: [
          {
            label: '所属模块',
            type: 'j-select',
            name: 'module',  // 后台接受字段
            placeholder: '请选择所属模块',
            dictCode: 'module',
            check: { rules: [{ required: true, message: '请选择所属模块', whitespace: true }] }
          },
          {
            label: '数据库类型',
            type: 'j-select',
            name: 'databaseType',  // 后台接受字段
            placeholder: '请选择数据库类型',
            dictCode: 'database_type',
            check: { rules: [{ required: true, message: '请选择数据库类型', whitespace: true }] }
          },
          {
            label: '数据库名称(schema)',
            type: 'input',
            name: 'databaseName',  // 后台接受字段
            placeholder: '请输入数据库名称',
            check: { rules: [{ required: true, message: '请输入数据库名称', whitespace: true }] }
          },

          {
            label: '用户',
            type: 'input',
            placeholder: '请输入用户',
            name: 'username',  // 后台接受字段
            check: { rules: [{ required: true, message: '请输入用户', whitespace: true }] }
          },

          {
            label: '密码',
            type: 'input-password',
            placeholder: '请输入密码',
            inpntType: 'password',
            name: 'password',  // 后台接受字段
            check: { rules: [{ required: true, message: '请输入密码', whitespace: true }] }
          },
          // {
          //   label: '表名',
          //   type: 'input',
          //   name: 'tableName',  // 后台接受字段
          //   placeholder: '请输入表名',
          //   check: { rules: [{ required: true, message: '请输入表名',whitespace:true }] }
          // },
          {
            label: '驱动',
            type: 'j-select',
            placeholder: '请选择驱动',
            name: 'diverName',  // 后台接受字段
            dictCode: 'database_driver',
            check: { rules: [{ required: true, message: '请选择驱动', whitespace: true }] }
          },
          {
            label: '数据库地址',
            type: 'input',
            placeholder: '请输入数据库地址',
            name: 'url',  // 后台接受字段
            check: { rules: [{ required: true, message: '请输入数据库地址', whitespace: true }] }
          },
          {
            label: '备注',
            type: 'input',
            placeholder: '请输入备注',
            name: 'remarks'  // 后台接受字段
          }
        ]
      }
      // let newDate = formatDateYmd(new Date().getTime())
      // ...this.selectionRows, startDate: newDate, endDate: newDate
      this.$refs.popupForm.edit({}, config)
      this.$refs.popupForm.disableSubmit = false

    },


    handleEdit1: async function(row) {
      // let option=[]
      // let res = await getAction(window._CONFIG['domianConfigURL'] + '/genDataConfigController/getInfo',{id:row.id})
      // if(res.success){
      //   option = res.result.map(item=>{
      //     return {
      //       name:item.name,
      //       value:item.code
      //     }
      //   })
      // }else {
      //   this.$message.error(res.message)
      // }

      let config = {
        title: '编辑配置',
        width: 500,
        addOrUpdateUrl: `${window._CONFIG['domianConfigURL']}/genDataConfigController/saveOrUpdate`,  //审核地址
        method: 'post',
        list: [
          {
            label: '所属模块',
            type: 'j-select',
            name: 'module',  // 后台接受字段
            placeholder: '请选择所属模块',
            dictCode: 'module',
            check: { rules: [{ required: true, message: '请选择所属模块', whitespace: true }] }
          },
          {
            label: '数据库类型',
            type: 'j-select',
            name: 'databaseType',  // 后台接受字段
            placeholder: '请选择数据库类型',
            dictCode: 'database_type',
            check: { rules: [{ required: true, message: '请选择数据库类型', whitespace: true }] }
          },
          {
            label: '数据库名称(schema)',
            type: 'input',
            name: 'databaseName',  // 后台接受字段
            placeholder: '请输入数据库名称',
            check: { rules: [{ required: true, message: '请输入数据库名称', whitespace: true }] }
          },

          {
            label: '用户',
            type: 'input',
            placeholder: '请输入用户',
            name: 'username',  // 后台接受字段
            check: { rules: [{ required: true, message: '请输入用户', whitespace: true }] }
          },

          {
            label: '密码',
            type: 'input-password',
            placeholder: '请输入密码',
            inpntType: 'password',
            name: 'password',  // 后台接受字段
            check: { rules: [{ required: true, message: '请输入密码', whitespace: true }] }
          },
          // {
          //   label: '表名',
          //   type: 'input',
          //   name: 'tableName',  // 后台接受字段
          //   placeholder: '请输入表名',
          //
          //   check: { rules: [{ required: true, message: '请输入表名',whitespace:true }] }
          // },
          {
            label: '驱动',
            type: 'j-select',
            placeholder: '请选择驱动',
            name: 'diverName',  // 后台接受字段
            dictCode: 'database_driver',
            check: { rules: [{ required: true, message: '请选择驱动', whitespace: true }] }
          },
          {
            label: '数据库地址',
            type: 'input',
            placeholder: '请输入数据库地址',
            name: 'url',  // 后台接受字段
            check: { rules: [{ required: true, message: '请输入数据库地址', whitespace: true }] }
          },
          {
            label: '备注',
            type: 'input',
            placeholder: '请输入备注',
            name: 'remarks'  // 后台接受字段
          }
        ]
      }
      // let newDate = formatDateYmd(new Date().getTime())
      // ...this.selectionRows, startDate: newDate, endDate: newDate
      this.$refs.popupForm.edit(row, config)
      this.$refs.popupForm.disableSubmit = false
    },
    search(queryParam) {
      this.selectedRowKeys = []
      this.selectionRows = []
      this.queryParam = queryParam
      this.loadData()
    },


    grabDetail(row) {
      this.$refs.grabLog.edit({ id: row.id })
    },

    kaChange: async function(value) {
      let res = await postAction(window._CONFIG['domianKaURL'] + '/kaBaseAreaController/findByConList', { dataType: value.dictDataCode })
      console.log(res)
      if (res.success) {
        let option = res.result.map(item => {
          return {
            name: item.name,
            value: item.code
          }
        })
        this.$refs.popupForm.config.list[10].option = option
        this.$refs.popupForm.form.resetFields('paramType')
      } else {
        this.$message.error(res.message)
      }
    },
    handleStatus(rows, status) {
      let that = this
      rows.status = Number(status)
      that.loading = true
      postAction(this.url.status, rows).then((res) => {
        if (res.success) {
          that.$message.success(res.message)
          that.loadData()
        } else {
          that.$message.warning(res.message)
        }
      }).finally(() => {
        that.loading = false
      })
    }


  }
}
</script>

<style lang='less' scoped>
@import '~@assets/less/common.less';

.ant-card-body {
  padding-left: 0 !important;
}

.big-box {
  display: flex;

  .left-box {
    width: 240px !important;
    flex-grow: 0;
    flex-shrink: 0;
    padding-right: 24px;

    .left-box-title {
      background-color: #d9d9d9;
      height: 50px;
      font-size: 22px;
      font-weight: 400;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }

    .left-box-content {
      border-top: 1px solid #d9d9d9;

      .content-flex {
        padding: 8px 16px;
        display: flex;
        justify-content: space-between;
        align-items: center;
      }
    }
  }

  .right-box {
    width: 80%;
    flex: 1;
  }
}
</style>